<template>
	<div class="goods">
		<div class="menu-wrapper" v-el:menu-wrapper>
			<ul>
				<li
				class="menu-item" 
				v-for="(index,item) in goods" 
				track-by = "$index"	
				:class="{meunCheck:tabIndex === index}"
				@click.native="handleMenuClick($index,$event)"	
				>
					<span class="text border-1px">
						<span v-show="item.type>0"
						 class="icon"
						:class="newClassName(item.type)"
						 ></span>
						{{item.name}}
					</span>
				</li>
			</ul>
			
		</div>
		<div class="foods-wrapper" v-el:food-wrapper>
			<ul>
				<li v-for="item in goods"
				track-by = "$index"
				class="food-list"
				>
					<h1 class="title">{{item.name}}</h1>
					<ul>
						<li v-for="food in item.foods"
							@click="handleFoodClick(food,$event)" 
							class="food-item border-1px"
						>
							<div class="foodicon">
								<img width="57" height="57" :src="food.icon" />
							</div>
							<div class="foodcontent">
								<h2 class="foodname">
									{{food.name}}
								</h2>
								<p class="fooddesc">
									{{food.description}}
								</p>
								<div class="extra">
									<span class="count">月售{{food.seellCount}}</span>
									<span class="">好评率 {{food.rating}}%</span>
								</div>
								<div class="price">
									<span class="now">￥{{food.price}}</span>
									<span class="old" v-show="food.oldPrice">{{food.oldPrice}}</span>
								</div>
								<div class="control-wrapper">
									<cartcontrol :food="food"></cartcontrol>
								</div>
							</div>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<shopcart 
		:deliveprice="seller.deliveryPrice"
		:minprice = "seller.minPrice"
		:select-foods = "selectFoods"
		></shopcart>
	</div>
	<food :food = "selectedFood" v-ref:food></food>
</template>

<script>
	import Bscroll from 'better-scroll'
	import shopcart from 'components/shopcart/shopcart'
	import cartcontrol from 'components/cartcontrol/cartcontrol'
	import food from 'components/food/food'
	export default{
		props:{
			seller:{
				type:Object
			}
		},
		components:{
			shopcart,
			cartcontrol,
			food
		},
		data:function(){
			return{
				goods:[],
				className: ['decrease', 'discount', 'guarantee', 'invoice', 'special'],
				tabIndex:0,
				offsetT:[],
				selectedFood:{}
			}
		},
		computed:{
			selectFoods:function(){
				var foods = [];
				this.goods.forEach(function(good){
					good.foods.forEach(function(food){
						if(food.count){
							foods.push(food)
						}
					})
				})				
				return foods
			}
		},
		methods:{
			newClassName: function(value) {
				return this.className[value];
			},
			_initScroll:function(){
				this.menuScroll = new Bscroll(this.$els.menuWrapper,{click:true})
				this.foodScroll = new Bscroll(this.$els.foodWrapper,{click:true,probeType:3})
			},
			handleMenuClick:function(index,event){			
				if(!event._constructed){//betterscroll 派发的点击事件带了_constructed是为true  浏览器原生的不带这个参数
					return
				}				
				var el = this.$els.foodWrapper.children[0].children[index]
				//this.foodScroll.scrollTo(0, 500)
				//console.log(el)
 				this.foodScroll.scrollToElement(el,1000)
				this.tabIndex =  index;
// 				if(index > 1 && index < 4){
// 					this.menuScroll.scrollTo(0,-13*index, 500)
// 				}
// 				var starY = this.menuScroll.startY
// 				if(starY < 0){
// 					if(index < 2){
// 						this.menuScroll.scrollTo(0,8*index, 500)
// 					}
// 				}								
			},
			offsetTfun:function(){
				var el = this.$els.foodWrapper.children[0].children				
				for(var i = 0; i < el.length;i ++){
					var top = el[i].offsetTop					
					this.offsetT.push(top)
				}								
			},
			handleFoodClick:function(food,event){
				if(!event._constructed){//betterscroll 派发的点击事件带了_constructed是为true  浏览器原生的不带这个参数
					return
				}
				this.selectedFood = food;
				this.$refs.food.show()
			}
			
		},
		created:function(){
			//console.log(this.selectFoods)
			this.$http.get('/api/goods')
			.then(function(data){
				//console.log(data.body)
				var res  = data.body
				if(res.errno == 0 && res.data){					 
					this.goods = res.data;
					//console.log(this.goods)
					this.$nextTick(function(){
						this.offsetTfun()
						this._initScroll();
						this.foodScroll.on("scroll",function(pos){
							for(var i = 0;i< this.offsetT.length;i++){
								//console.log(Math.abs(pos.y),this.offsetT[i])
								if(Math.floor(Math.abs(pos.y)) >= this.offsetT[i]){	
									console.log(i)
									this.tabIndex =  i;
									//this.offsetT.splice(i,1)
								}
							}
						}.bind(this))
					}.bind(this))
				}
			})
			//
				
		}
	}
</script>

<style lang="stylus" scoped="scoped">
	@import "../../common/stylus/mixin.styl"
	.goods{
		display: flex;
		position: absolute;
		width: 100%;
		top: 174px;
		bottom: 46px;
		overflow: hidden
	}
	.menu-wrapper {
		flex: 0 0 80px;
		width: 80px;
		background: #f3f5f7;
	}
	.foods-wrapper {
		flex: 1;
	}
	.menu-item {
		display: table;
		width: 56px;
		height: 54px;
		line-height: 14px;
		padding: 0 12px;
	}
	.meunCheck {
		background: #fff;
	}	
	.icon {
		display: inline-block;
		width: 12px;
		height: 12px;
		vertical-align: top;
		margin-right: 2px;
		background-size: 12px 12px;
		background-repeat: no-repeat;
	}
	.icon.decrease{
		bg-image("decrease_3")
	}
	.icon.discount{
		bg-image("discount_3")
	}
	.icon.guarantee{
		bg-image("guarantee_3")
	}
	.icon.invoice{
		bg-image("invoice_3")
	}
	.icon.special{
		bg-image("special_3")
	}
	.text {
		display: table-cell;
		width: 56px;
		vertical-align: middle;
		font-size: 12px;
		border-1px(rgba(7,17,27,0.1)) ;
	}
	.menu-item.meunCheck .text:after {
		display:none
	}
	.title {
		padding-left: 14px;
		height: 26px;
		line-height: 26px;
		border-left:2px solid #d9dde1;
		font-size: 12px;
		color: rgb(147,153,159);
		background: #F3F5F7;
	}
	.food-item {
		display: flex;
		margin: 18px;
		padding-bottom:18px;
		border-1px(rgba(7,17,27,0.1));
	}
	.foodicon {
		flex: 0 0 57px;
		margin-right: 10px;
	}
	.foodcontent {
		flex: 1;		
	}
	.food-item:last-child {
		border-none()
		margin-bottom: 0px;		
	}	
	.foodcontent {
		
	}
	.foodname {
		margin: 2px 0 8px 0;
		line-height: 14px;
		height: 14px;
		font-size: 14px;
		color: #000;
	}
	.fooddesc,.extra {		
		line-height: 10px;
		font-size: 10px;
		color: rgb(147,153,159);
	}
	.fooddesc {
		line-height: 12px;
		margin-bottom: 8px;
	}	
	.count {
		margin-right:12px ;
	}
	.price {
		font-weight: 700;
		line-height: 24px;		
	}
	.control-wrapper {
		position: absolute;
		right: 0px;
		bottom: 12px;		
	}
	.now {
		margin-right:8px;
		font-size: 14px;
		color: #ff0000;
	}
	.old {
		text-decoration: line-through;
		font-size: 10px;
		color: rgb(147,153,159);
	}
</style>
